Web App Manifest: Opas Progressive Web App -konfiguraatioon

Web App Manifest on JSON-tiedosto, joka tarjoaa tietoja web-sovelluksestasi selaimille ja käyttöjärjestelmille. Näitä tietoja käytetään, kun sovellus asennetaan käyttäjän laitteelle, ja ne määrittävät, miltä sovellus näyttää ja miten se toimii Progressive Web App (PWA) -sovelluksena. Ajattele sitä piirustuksena, joka muuttaa verkkosivustosi asennettavaksi, sovellusmaiseksi kokemukseksi. Hyvin määritetty manifesti on ratkaisevan tärkeä käyttäjien sitoutumisen ja löydettävyyden kannalta.

Mikä on Progressive Web App (PWA)?

Ennen kuin sukellamme Web App Manifest -tiedostoon, kerrataan, mikä PWA on. PWA:t ovat web-sovelluksia, jotka tarjoavat sovellusmaisen käyttökokemuksen käyttäjille. Ne ovat:

• Luotettavia: Latautuvat välittömästi ja toimivat offline-tilassa tai heikkolaatuisissa verkoissa palvelutyöntekijöiden ansiosta.
• Nopeita: Reagoivat nopeasti käyttäjän toimintoihin sujuvilla animaatioilla ja ilman nykiviä vierityksiä.
• Sitouttavia: Tarjoavat mukaansatempaavan käyttökokemuksen, jossa on ominaisuuksia, kuten push-ilmoitukset ja mahdollisuus asentaa ne aloitusnäyttöön.

Web App Manifestin rooli

Web App Manifest on PWA:n kulmakivi. Se tarjoaa tarvittavat tiedot selaimille, jotta ne voivat:

• Asentaa PWA:n: Sen avulla käyttäjät voivat asentaa web-sovelluksen laitteisiinsa ja lisätä sen aloitusnäyttöön tai sovelluskäynnistimeen.
• Näyttää PWA:n oikein: Se määrittää sovelluksen nimen, kuvakkeet, teemavärin ja muut visuaaliset näkökohdat.
• Hallita PWA:n toimintaa: Se määrittää, miten sovellus tulisi käynnistää (esim. koko näytön tilassa tai erillisenä ikkunana) ja miten se tulisi integroida käyttöjärjestelmään.

`manifest.json`-tiedoston luominen

Web App Manifest on JSON-tiedosto, jonka nimi on yleensä `manifest.json`. Se tulisi sijoittaa web-sovelluksesi juurihakemistoon. Tässä on perusesimerkki:

            {
  "name": "Mahtava PWA-sovellukseni",
  "short_name": "Mahtava PWA",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#000000",
  "icons": [
    {
      "src": "/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}
            

              
                Copy
              
            
          

Katsotaanpa tarkemmin jokaista näistä ominaisuuksista:

`name`

Web-sovelluksesi koko nimi. Tämä nimi näytetään käyttäjille, kun heitä kehotetaan asentamaan sovellus, ja sovelluskäynnistimessä.

Esimerkki:

            "name": "Globaali uutissovellus"
            

              
                Copy
              
            
          

`short_name`

Sovelluksesi nimen lyhyempi versio, jota käytetään, kun tilaa on rajoitetusti, kuten aloitusnäytössä tai sovelluskäynnistimessä. Pidä se ytimekkäänä.

Esimerkki:

            "short_name": "Globaali uutiset"
            

              
                Copy
              
            
          

`start_url`

URL-osoite, jonka sovelluksen pitäisi ladata, kun se käynnistetään. Se on yleensä web-sovelluksesi kotisivu, mutta se voi olla myös tietty aloitussivu.

Esimerkki:

            "start_url": "/"
            

              
                Copy
              
            
          

Voit käyttää myös URL-osoitetta, jossa on kyselyparametreja, seurataksesi, miten käyttäjät käynnistävät PWA:si:

            "start_url": "/?utm_source=homescreen"
            

              
                Copy
              
            
          

`display`

Määrittää, miten sovellus tulisi näyttää, kun se käynnistetään. On olemassa useita vaihtoehtoja:

• `standalone`: Sovellus avautuu omassa ylimmän tason ikkunassaan ilman selaimen käyttöliittymäelementtejä, kuten osoiteriviä.
• `fullscreen`: Sovellus vie koko näytön, piilottaen jopa tilarivin.
• `minimal-ui`: Samanlainen kuin `standalone`, mutta tarjoaa minimaalisen selaimen käyttöliittymän, kuten takaisin- ja päivityspainikkeen.
• `browser`: Sovellus avautuu normaalissa selainvälilehdessä tai -ikkunassa.

Suositus: `standalone` on yleensä suositeltava vaihtoehto PWA:ille.

Esimerkki:

            "display": "standalone"
            

              
                Copy
              
            
          

`background_color`

Sovelluksen splash-näytön taustaväri, kun se käynnistetään. Tämä on tärkeää, jotta sovelluksen kuvakkeen ja sovelluksen sisällön välille saadaan saumaton siirtymä.

Esimerkki:

            "background_color": "#ffffff"
            

              
                Copy
              
            
          

`theme_color`

Teemaväri, jota käytetään sovelluksen käyttöliittymän tyylittämiseen, kuten Androidin tilariviin. Tämän värin tulisi vastata sovelluksesi brändäystä.

Esimerkki:

            "theme_color": "#000000"
            

              
                Copy
              
            
          

`icons`

Objektien taulukko, joista jokainen edustaa sovelluksen kuvaketta. Sinun tulisi tarjota useita erikokoisia kuvakkeita varmistaaksesi, että sovellus näyttää hyvältä eri laitteilla ja resoluutioilla.

Kunkin kuvakkeen ominaisuudet:

• `src`: Kuvakkeen kuvan URL-osoite.
• `sizes`: Kuvakkeen mitat pikseleinä (esim. "192x192").
• `type`: Kuvakkeen kuvan MIME-tyyppi (esim. "image/png").

Suositellut kuvakekoot:

• 48x48
• 72x72
• 96x96
• 144x144
• 192x192
• 512x512

Esimerkki:

            "icons": [
  {
    "src": "/icons/icon-192x192.png",
    "sizes": "192x192",
    "type": "image/png"
  },
  {
    "src": "/icons/icon-512x512.png",
    "sizes": "512x512",
    "type": "image/png"
  }
]
            

              
                Copy
              
            
          

Muut Manifestin ominaisuudet

Vaikka yllä olevat ominaisuudet ovat yleisimpiä, Web App Manifest tukee monia muitakin vaihtoehtoja PWA:si määrittämiseen:

`id`

PWA:si yksilöllinen tunniste. Tämä on tärkeää konfliktien estämiseksi, jos sinulla on useita PWA:ita, joilla on sama nimi.

Esimerkki:

            "id": "com.example.myapp"
            

              
                Copy
              
            
          

`scope`

Määrittää sovelluksen navigointialueen. Tämä määrittää, mitkä verkkosivustosi URL-osoitteet katsotaan osaksi PWA:ta. Jos käyttäjä siirtyy alueen ulkopuolelle, sovellus avautuu normaalissa selainvälilehdessä.

Esimerkki:

            "scope": "/app/"
            

              
                Copy
              
            
          

Tässä esimerkissä vain `/app/`-merkillä alkavat URL-osoitteet katsotaan osaksi PWA:ta.

`orientation`

Määrittää sovelluksen ensisijaisen näytön suunnan. Vaihtoehtoja ovat `portrait`, `landscape`, `any` ja muita.

Esimerkki:

            "orientation": "portrait"
            

              
                Copy
              
            
          

`related_applications`

Objektien taulukko, joka määrittää liittyvät natiivisovellukset. Tämän avulla voit mainostaa natiivisovelluksiasi käyttäjille, jotka ovat jo asentaneet PWA:si.

Esimerkki:

            "related_applications": [
  {
    "platform": "play",
    "id": "com.example.myapp"
  }
]
            

              
                Copy
              
            
          

Tämä esimerkki osoittaa, että Google Play Kaupassa on liittyvä natiivisovellus, jonka tunnus on `com.example.myapp`.

`prefer_related_applications`

Boolean-arvo, joka ilmaisee, pitäisikö käyttäjää kehottaa asentamaan liittyvä natiivisovellus PWA:n sijaan.

Esimerkki:

            "prefer_related_applications": true
            

              
                Copy
              
            
          

`categories`

Merkkijonojen taulukko, joka edustaa sovelluksen luokkia. Tämä voi auttaa käyttäjiä löytämään sovelluksesi sovelluskaupoista tai hakutuloksista.

Esimerkki:

            "categories": ["uutiset", "tiedot"]
            

              
                Copy
              
            
          

`shortcuts`

Määrittää luettelon pikakuvakkeista, joita käyttäjät voivat käyttää sovelluksen kuvakkeesta aloitusnäytöllään. Tämän avulla käyttäjät voivat nopeasti suorittaa yleisiä tehtäviä sovelluksessa.

Esimerkki:

            "shortcuts": [
  {
    "name": "Viimeisimmät uutiset",
    "short_name": "Uutiset",
    "description": "Lue uusimmat uutisartikkelit",
    "url": "/news",
    "icons": [{
      "src": "/icons/news.png",
      "sizes": "192x192",
      "type": "image/png"
    }]
  }
]
            

              
                Copy
              
            
          

Manifestin linkittäminen web-sovellukseesi

Kun olet luonut `manifest.json`-tiedostosi, sinun on linkitettävä se web-sovellukseesi lisäämällä ``-tagi HTML-koodisi ``-osioon:

            <link rel="manifest" href="/manifest.json">
            

              
                Copy
              
            
          

Manifestin validointi

On tärkeää validoida `manifest.json`-tiedostosi varmistaaksesi, että se on oikein muotoiltu ja sisältää kaikki vaaditut ominaisuudet. Voit käyttää online-työkaluja, kuten JSONLint tai Chrome DevTools -työkaluja manifestisi validoimiseen.

PWA:si testaaminen

Kun olet luonut ja linkittänyt manifestisi, sinun tulisi testata PWA:si eri selaimissa ja laitteissa varmistaaksesi, että se toimii odotetusti. Käytä Chrome DevTools (Application -> Manifest) -työkaluja tarkastaaksesi manifestisi ja diagnosoidaksesi mahdolliset ongelmat.

Parhaat käytännöt Web App Manifestin konfigurointiin

• Anna kaikki vaaditut ominaisuudet: Varmista, että olet sisällyttänyt kaikki olennaiset ominaisuudet, kuten `name`, `short_name`, `start_url`, `display`, `background_color`, `theme_color` ja `icons`.
• Käytä sopivia kuvakekokoja: Tarjoa useita erikokoisia kuvakkeita tukeaksesi eri laitteita ja resoluutioita.
• Valitse oikea näyttötila: Valitse `display`-tila, joka sopii parhaiten sovelluksesi käyttökokemukseen. `standalone` on yleensä suositeltava vaihtoehto.
• Validoi manifestisi: Validoi aina `manifest.json`-tiedostosi varmistaaksesi, että se on oikein muotoiltu.
• Testaa PWA:si: Testaa PWA:si eri selaimissa ja laitteissa varmistaaksesi, että se toimii odotetusti.
• Optimoi SEO:ta varten: Käytä olennaisia avainsanoja kohdissa `name`, `short_name` ja `description` parantaaksesi sovelluksesi löydettävyyttä.
• Harkitse lokalisointia: Jos sovelluksesi on suunnattu maailmanlaajuiselle yleisölle, harkitse manifestisi lokalisoitujen versioiden tarjoamista eri nimillä, kuvauksilla ja kuvakkeilla eri kielille.

Esimerkkejä hyvin määritetyistä Web App Manifest -tiedostoista

Twitter Lite

            {
  "name": "Twitter Lite",
  "short_name": "Twitter",
  "icons": [
    {
      "src": "/static/icons/mstile-150x150.png",
      "sizes": "150x150",
      "type": "image/png"
    },
    {
      "src": "/static/icons/twitter-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/static/icons/twitter-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#1da1f2",
  "description": "Twitter Lite on nopeampi ja dataystävällisempi tapa nähdä, mitä maailmassa tapahtuu.",
  "orientation": "portrait"
}
            

              
                Copy
              
            
          

Starbucks

            {
  "name": "Starbucks",
  "short_name": "Starbucks",
  "icons": [
    {
      "src": "/static/icons/starbucks-icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/static/icons/starbucks-icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "start_url": "/",
  "display": "standalone",
  "background_color": "#f2f0eb",
  "theme_color": "#00704a",
  "description": "Tilaa suosikki Starbucks-juomasi ja -ruokasi sovelluksella.",
  "orientation": "portrait",
  "shortcuts": [
    {
      "name": "Tilaa nyt",
      "short_name": "Tilaa",
      "description": "Aloita uusi tilaus",
      "url": "/order",
      "icons": [{
        "src": "/static/icons/order-icon.png",
        "sizes": "192x192",
        "type": "image/png"
      }]
    }
  ]
}
            

              
                Copy
              
            
          

Web App Manifestin tulevaisuus

Web App Manifest on kehittyvä standardi, johon lisätään uusia ominaisuuksia ja toimintoja ajan myötä. Pidä silmällä W3C:n uusimpia päivityksiä ja suosituksia varmistaaksesi, että PWA:si hyödyntävät täysimääräisesti uusimpia teknologioita.

Johtopäätös

Web App Manifest on olennainen osa mitä tahansa PWA:ta. Määrittelemällä manifestisi oikein voit tarjota saumattoman ja mukaansatempaavan käyttökokemuksen, jolloin web-sovelluksesi tuntuu natiivisovellukselta. Tämä opas on tarjonnut kattavan yleiskatsauksen Web App Manifest -tiedostosta, mukaan lukien sen ominaisuudet, parhaat käytännöt ja esimerkit. Noudattamalla näitä ohjeita voit hyödyntää PWA:idesi koko potentiaalin ja tarjota käyttäjillesi ylivoimaisen käyttökokemuksen ympäri maailmaa.

Hyödynnä Web App Manifestin tehoa ja muunna verkkosivustosi asennettaviksi, sovellusmaisiksi kokemuksiksi, jotka ilahduttavat käyttäjiä ja lisäävät sitoutumista.